<!--
	* @Description: Lisonglin[2:30 player]
	* @Date: 2021-10-07 17:26:01
	* @LastEditTime: 2021-10-18 13:12:55
	* @FilePath: \webd:\sharefile\base.html
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>主界面</title>
		<link type="text/css" href="../css/base.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
		<script src="../js/jquery-2.2.3.min.js"></script>
		<script src="../Highcharts-9.1.2/code/highcharts.js"></script>
		<script src="../Highcharts-9.1.2/code/modules/exporting.js"></script>
		<script src="../Highcharts-9.1.2/code/highcharts-more.js"></script>
		<script src="../Highcharts-9.1.2/code/modules/solid-gauge.js"></script>
		<script type="text/javascript">
			var global_time=1000;
////////////////////////////////////////////////////////////////////////////////////
// 按钮处理函数
////////////////////////////////////////////////////////////////////////////////////
	function Func_Btn_SendCmd(cmd){
		var xmlhttp;
		if(window.XMLHttpRequest)
			xmlhttp=new XMLHttpRequest();
		else
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.onreadystatechange=function()
		{
			if(xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				alert(xmlhttp.responseText);
				// 发送成功
				if(xmlhttp.responseText=="OK"){
					if(cmd=="flag1=0"){
						document.getElementById('flag1').innerText="✔️开启";
					}else if(cmd=="flag1=1"){
						document.getElementById('flag1').innerText="❌关闭";
					}
					alert("发送成功！");
				}
			}
			else{
				// 发送失败
			}
		}
		// 调用CGI程序执行
		if(cmd!='set_th'){
			xmlhttp.open("GET","/cgi-bin/library_cgi/update_query.cgi?"+cmd,true);
		}else{
			var s1_th = document.getElementById('s1_th_edit').value;
			var s2_th = document.getElementById('s2_th_edit').value;
			var cmd = "s1_th=" + s1_th + "s2_th=" + s2_th;
			xmlhttp.open("GET","/cgi-bin/library_cgi/update_query.cgi?"+cmd,true);
		}
		xmlhttp.send();
	}
////////////////////////////////////////////////////////////////////////////////////
// 查询处理函数
////////////////////////////////////////////////////////////////////////////////////
	function Func_Btn_GetQuery(index){
		var xmlhttp;
		var edit_text = document.getElementById("query_edit").value;
		if(window.XMLHttpRequest)
			xmlhttp=new XMLHttpRequest();
		else
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.onreadystatechange=function()
		{
			if(xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var ret = JSON.parse(xmlhttp.responseText);
				var len = ret.stu_id.length;
				alert(xmlhttp.responseText);
				if(index==1){
					for(var a=0;a<len;a++){
						document.getElementById("query_result1").innerHTML+='<tr><td>'+ret.stu_name[a]+'</td><td>'+ret.stu_id[a]+'</td><td>'+ret.book_name[a]+'</td><td>'+ret.book_id[a]+'</td><td>'+ret.info[a]+'</td><td>'+ret.date[a]+'</td></tr>';
					}
				}else if(index==2){
					for(var a=0;a<len;a++){
						document.getElementById("query_result1").innerHTML+='<tr><td>'+ret.book_name[a]+'</td><td>'+ret.book_id[a]+'</td><td>'+ret.stu_name[a]+'</td><td>'+ret.stu_id[a]+'</td><td>'+ret.info[a]+'</td><td>'+ret.date[a]+'</td></tr>';
					}
				}else if(index==3||index==4){
					var month_arr_borrow = [0,0,0,0,0,0,0,0,0,0,0,0,0];
					var month_arr_return = [0,0,0,0,0,0,0,0,0,0,0,0,0];
					for(var a=0;a<len;a++){
						if(ret.info[a]=="借阅")
							month_arr_borrow[parseInt(ret.date[a].substring(5))]++;
						else
							month_arr_return[parseInt(ret.date[a].substring(5))]++;
					}
					var chart = Highcharts.chart('my_chart',{
						chart: {
							type: 'column'
						},
						title: {
							text: (function () {
								// 生成随机值
								var data = [];
								if(index==3)	data='借阅人借阅书籍次数-月份统计';
								else if(index==4)	data='图书被借阅次数-月份统计';
								return data;
							}())
						},
						xAxis: {
							categories: [
								'一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
							],
							crosshair: true
						},
						yAxis: {
							min: 0,
							title: {
								text: '次数'
							}
						},
						tooltip: {
							pointFormat: '{series.name}次数: <b>{point.y} 次</b>'
						},
						plotOptions: {
							column: {
								borderWidth: 0
							}
						},
						series: [{
							name: '借阅',
							data: (function () {
								var data = [];
								for (var i = 1; i <= 12; i++ ) {
									data.push({
										x: i-1,
										y: month_arr_borrow[i],
									});
								}
								return data;
							}())
						},{
							name: '归还',
							data: (function () {
								var data = [];
								for (var i = 1; i <= 12; i++ ) {
									data.push({
										x: i-1,
										y: month_arr_return[i],
									});
								}
								return data;
							}())
						}]
					});
				}
			}
			else{
			}
		}
		////////////////////////////////////////////////////////////////////////////////////
		if(index==1){
			xmlhttp.open("GET","/cgi-bin/library_cgi/get_query_chart.cgi?query_edit="+1+"|"+edit_text,true);
		}else if(index==2){
			xmlhttp.open("GET","/cgi-bin/library_cgi/get_query_chart.cgi?query_edit="+2+"|"+edit_text,true);
		}else if(index==3){
			xmlhttp.open("GET","/cgi-bin/library_cgi/get_query_chart.cgi?query_edit="+1+"|"+edit_text,true);
		}else if(index==4){
			xmlhttp.open("GET","/cgi-bin/library_cgi/get_query_chart.cgi?query_edit="+2+"|"+edit_text,true);
		}
		////////////////////////////////////////////////////////////////////////////////////
		xmlhttp.send();
	}
////////////////////////////////////////////////////////////////////////////////////
// 定时刷新数据
////////////////////////////////////////////////////////////////////////////////////
	setInterval(function () {
		var xmlhttp;
		if(window.XMLHttpRequest)
			xmlhttp=new XMLHttpRequest();
		else
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.onreadystatechange=function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				var ret=JSON.parse(xmlhttp.responseText);
				// 设置文本值
				document.getElementById('s1_val').innerText = ret.s1_val + "%";
				document.getElementById('s2_val').innerText = ret.s2_val + "%";
				document.getElementById('s1_th').innerText = ret.s1_th + "%";
				document.getElementById('s2_th').innerText = ret.s2_th + "%";
				if( ret.flag1 == "0" ){
					document.getElementById('flag1').innerText="✔️开启";
				}else{
					document.getElementById('flag1').innerText="❌关闭";
				}
				if( ret.flag2 == "0" ){
					document.getElementById('flag2').innerText="✔️安全";
				}else{
					document.getElementById('flag2').innerText="❌危险";
				}
			}
			else {
			}
		}
		xmlhttp.open("GET","/cgi-bin/library_cgi/refresh_data.cgi",true);
		xmlhttp.send();
	}, global_time);
		</script>
	</head>
	<body>
		<script src="../layui/layui.js" charset="utf-8"></script>
		<script>
			////////////////////////////////////////////////////////////////////////////////////
			// Layui弹出层
			////////////////////////////////////////////////////////////////////////////////////
			layui.use('layer', function(){
				var $ = layui.jquery, layer = layui.layer;
				var table = layui.table;

				//触发事件
				var active = {
					offset1: function(othis){
						var type = othis.data('type')
							,text = othis.text();

						layer.open({
							type: 1,
							skin: 'layui-layer-rim', //加上边框
							area: ['1400px', '600px'], //宽高
							title: "数据查询",
							content: '<div id="select_date">\
							查询借阅人：<input type="text" id="query_edit">\
							&nbsp;&nbsp;&nbsp;&nbsp;\
							<input type="button" id="query_btn" value="确认" onclick="Func_Btn_GetQuery(1)">\
							</div>\
							<div>\
							<table id="tab">\
							<thead>\
							<tr>\
							<th>借阅人姓名</th>\
							<th>学号</th>\
							<th>图书名称</th>\
							<th>图书ID</th>\
							<th>操作</th>\
							<th>日期</th>\
							</tr>\
							</thead>\
							<tbody id="query_result1">\
							</tbody>\
							</table>\
							</div>'
						});
					},
					offset2: function(othis){
						var type = othis.data('type')
							,text = othis.text();

						layer.open({
							type: 1,
							skin: 'layui-layer-rim', //加上边框
							area: ['1400px', '600px'], //宽高
							title: "数据查询",
							content: '<div id="select_date">\
							查询书号：<input type="text" id="query_edit">\
							&nbsp;&nbsp;&nbsp;&nbsp;\
							<input type="button" id="query_btn" value="确认" onclick="Func_Btn_GetQuery(2)">\
							</div>\
							<div>\
							<table id="tab">\
							<thead>\
							<tr>\
							<th>图书ID</th>\
							<th>图书名称</th>\
							<th>学号</th>\
							<th>借阅人姓名</th>\
							<th>操作</th>\
							<th>日期</th>\
							</tr>\
							</thead>\
							<tbody id="query_result1">\
							</tbody>\
							</table>\
							</div>'
						});
					},
					offset3: function(othis){
						var type = othis.data('type')
							,text = othis.text();

						layer.open({
							type: 1,
							skin: 'layui-layer-rim', //加上边框
							area: ['1400px', '600px'], //宽高
							title: "数据查询",
							content: '<div id="select_date">\
							按借阅人图形统计：<input type="text" id="query_edit">\
							&nbsp;&nbsp;&nbsp;&nbsp;\
							<input type="button" id="query_btn" value="确认" onclick="Func_Btn_GetQuery(3)">\
							</div>\
							<div id="my_chart" style="min-width:400px;height:400px"></div>'
						});
					},
					offset4: function(othis){
						var type = othis.data('type')
							,text = othis.text();

						layer.open({
							type: 1,
							skin: 'layui-layer-rim', //加上边框
							area: ['1400px', '600px'], //宽高
							title: "数据查询",
							content: '<div id="select_date">\
							按书号图形统计：<input type="text" id="query_edit">\
							&nbsp;&nbsp;&nbsp;&nbsp;\
							<input type="button" id="query_btn" value="确认" onclick="Func_Btn_GetQuery(4)">\
							</div>\
							<div id="my_chart" style="min-width:400px;height:400px"></div>'
						});
					}
				};
				$('.layui-btn').on('click', function(){
					var othis = $(this), method = othis.data('method');
					active[method] ? active[method].call(this, othis) : '';
				});
			});
		</script>
		<img src="../img/config_bg.jpg" class="bg">
		<!-- 页面标题 -->
		<h1>智能图书馆物联网系统主界面</h1>
		<!-- 区域一 -->
		<div id="div1">
			<br>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">烟雾值1:</p>
				<p id="s1_val"  style="width: 100px; float: left;">---</p>
			</div>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">烟雾值2:</p>
				<p id="s2_val"  style="width: 100px; float: left;">---</p>
			</div>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">烟雾阈值1:</p>
				<p id="s1_th"  style="width: 100px; float: left;">---</p>
			</div>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">烟雾阈值2:</p>
				<p id="s2_th"  style="width: 100px; float: left;">---</p>
			</div>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">图书馆开启状态:</p>
				<p id="flag1"  style="width: 100px; float: left;">---</p>
			</div>
			<div>
				<p style="width: 200px; float: left; margin-left: 200px;">图书馆警报状态:</p>
				<p id="flag2"  style="width: 100px; float: left;">---</p>
			</div>
		</div>
		<!-- 区域二 -->
		<div id="div2">
			<br>
			烟雾阈值1设置：<input type="text" id="s1_th_edit">&nbsp;&nbsp;
			<br><br>
			烟雾阈值2设置：<input type="text" id="s2_th_edit">&nbsp;&nbsp;
			<br><br>
			<input type="button" value="确认设置" style="width: 120px; height: 40px;" onclick="Func_Btn_SendCmd('set_th')">
			<br><br><br>
			<input type="button" class="btn" value="开馆" onclick="Func_Btn_SendCmd('flag1=0')">
			<input type="button" class="btn" value="闭馆" onclick="Func_Btn_SendCmd('flag1=1')">
			<br>
			<input type="button" class="btn" value="开启报警" onclick="Func_Btn_SendCmd('flag2=1')">
			<input type="button" class="btn" value="关闭报警" onclick="Func_Btn_SendCmd('flag2=0')">
			<br>
		</div>
		<!-- 区域三 -->
		<div id="div3">
			<br>
			<button data-method="offset1" data-type="auto" class="layui-btn layui-btn-normal btn">按借阅人查询</button>
			<button data-method="offset2" data-type="auto" class="layui-btn layui-btn-normal btn">按书号查询</button>
			<br>
			<button data-method="offset3" data-type="auto" class="layui-btn layui-btn-normal btn">按借阅人图形统计</button>
			<button data-method="offset4" data-type="auto" class="layui-btn layui-btn-normal btn">按书号图形统计</button>
			<br>
		</div>
		<!-- 区域四 -->
		<div id="div4">
			<!-- ??? -->
		</div>
	</body>
</html>

